<template>
  <div class="app-container container">
    <el-container>
      <el-aside width="220px" style="background-color: white;padding: 2px;margin-bottom: 0;">
        <!--组织结构数据-->
        <auth-project @selectBuilding="getCurrentProject" />
      </el-aside>
      <!--用户数据-->
      <el-main style="padding: 0 0 0 20px;">
        <el-form
          v-show="showSearch"
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="68px"
        >
          <el-form-item size="mini" label="">
            <el-input
              v-model.number="queryParams.floor"
              placeholder="请输入楼层"
              clearable
            />
          </el-form-item>
          <el-form-item size="mini" label="">
            <el-input
              v-model="queryParams.roomName"
              placeholder="房间名称"
              clearable
            />
          </el-form-item>
          <el-form-item size="mini" label="">
            <el-input
              v-model="queryParams.checkUserName"
              placeholder="验收人"
              clearable
            />
          </el-form-item>
          <el-form-item size="mini" label="">
            <el-select v-model="queryParams.checktypeId" filterable clearable placeholder="请选择分部分项" @change="changeChecktype">
              <el-option
                v-for="item in checkTypeList"
                :key="item.fid"
                :label="item.fnumber + ' - ' +item.fnameL2"
                :value="item.fid"
              />
            </el-select>
          </el-form-item>
          <el-form-item size="mini" label="">
            <el-select v-model="queryParams.checktableId" filterable clearable placeholder="请选择工序" style="width: 300px;">
              <el-option
                v-for="item in checkTableList"
                :key="item.fid"
                :label="item.cfseq + ' - ' + item.fnameL2"
                :value="item.fid"
              />
            </el-select>
          </el-form-item>
          <el-form-item size="mini" label="">
            <el-select v-model="queryParams.chkResult" multiple collapse-tags filterable placeholder="验收结果" clearable>
              <el-option
                v-for="item in checkResultData"
                :key="'checkResult' + item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item size="mini" label="">
            <el-date-picker
              v-model="queryParams.beginDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="整改期限从"
            />
          </el-form-item>
          <el-form-item size="mini" label="">
            <el-date-picker
              v-model="queryParams.endDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="整改期限到"
            />
          </el-form-item>
          <el-form-item size="mini">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" size="small" :data="data" height="calc(100vh - 280px)">
          <el-table-column label="验收结果" align="center" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.checkResult | checkResult }}
            </template>
          </el-table-column>
          <el-table-column label="项目名称" align="center" prop="projectName" min-width="160" show-overflow-tooltip />
          <el-table-column label="楼栋" align="center" prop="buildingName" min-width="80" />
          <el-table-column label="楼层" align="center" prop="floor" min-width="70" />
          <el-table-column label="房间" align="center" prop="roomName" min-width="70" />
          <el-table-column label="分项工程" align="center" prop="checkTypeName" min-width="120" show-overflow-tooltip />
          <el-table-column label="工序" align="center" prop="checkTableName" min-width="150" show-overflow-tooltip />
          <el-table-column label="问题类型" align="center" min-width="92">
            <template slot-scope="scope">
              {{ scope.row.problemProperty | problemProperty }}
            </template>
          </el-table-column>
          <el-table-column label="验收人" align="center" prop="checkUserName" min-width="80" />
          <el-table-column label="验收日期" align="center" prop="batch" min-width="90">
            <template slot-scope="scope">
              {{ scope.row.checkDate | dateFilter }}
            </template>
          </el-table-column>
          <el-table-column label="整改期限" align="center" prop="inspectionTime" min-width="90">
            <template slot-scope="scope">
              {{ scope.row.reformDate | dateFilter }}
            </template>
          </el-table-column>
          <el-table-column label="上传时间" align="center" prop="uploadTime" min-width="130" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="80">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="showPrint(scope.row)"
              >查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <el-dialog :visible.sync="open" :close-on-click-modal="false" width="1000px" class="show-print" append-to-body>
          <div class="print-wrap">
            <el-button v-print="printConfig" plain type="primary" icon="el-icon-printer" size="mini" class="print-btn" :loading="printBtnLoading" @click="previewPrint">打印</el-button>
            <print-page v-loading="printObjLoading" :print-obj="printObj" show-pile-image />
          </div>
        </el-dialog>

      </el-main>
    </el-container>
    <print-page id="print" :print-obj="printObj" />
  </div>
</template>

<script>
let problemPropertyList = []
import PrintPage from './Print'
import { checkResultData } from '@/utils/baseData'
import { list, listBe, getRecord } from '@/api/qualityManage/checkRecord'
import AuthProject from './components/AuthProject'
import { getEnum } from '@/api/common'
import { listCheckType } from '@/api/qualityManage/checkType'
import { listCheckTable } from '@/api/qualityManage/checkTable'
import print from 'vue-print-nb'
export default {
  name: 'CheckRecord',
  components: {
    AuthProject,
    PrintPage
  },
  directives: {
    print
  },
  filters: {
    problemProperty(value) {
      for (let i = 0; i < problemPropertyList.length; i++) {
        if (parseInt(problemPropertyList[i].value) === value) {
          return problemPropertyList[i].label
        }
      }
      if (value === 0) {
        return ''
      }
      return value
    }
  },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      checkTableList: [],
      // 弹出层标题
      title: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        buildingId: '',
        floor: '',
        roomName: '',
        checkUserName: '',
        checktypeId: '',
        checktableId: '',
        chkResult: [],
        beginDate: '',
        endDate: ''
      },
      data: [],
      loading: false,
      currentBuilding: {},
      printObj: {},
      open: false,
      printConfig: {
        id: 'print',
        popTitle: '查看整改通知单-工程协同管理',
        callback: () => {
          this.printBtnLoading = false
        }
      },
      printObjLoading: false,
      printBtnLoading: false,
      checkResultData: [],
      checkTypeList: []
    }
  },
  watch: {
    currentBuilding: {
      immediate: true,
      handler(val) {
        // if (val && val.id) {
        //   listCheckConfig({ cfbuildingid: val.id }).then(response => {
        //     this.checkTableList = response.data
        //   })
        // }
      }
    }
  },
  created() {
    getEnum('problemProperty').then(response => {
      problemPropertyList = [...response.data.problemProperty]
    })
    this.checkResultData = checkResultData.filter(re => re.value !== -1)
    this.getCheckList()
    this.getCheckTableList()
  },
  methods: {
    getCheckList() { // 分部分项
      listCheckType({}).then(response => {
        this.checkTypeList = response.data
      })
    },
    changeChecktype() {
      this.queryParams.checktableId = ''
      this.getCheckTableList()
    },
    getCheckTableList() { // 获取工序列表
      listCheckTable({ 'cfchecktypeid': this.queryParams.checktypeId }).then(
        (response) => {
          this.checkTableList = response.data
        }
      ).catch(() => {
      })
    },
    previewPrint() {
      document.getElementById('print').style.zoom = 0.7
      this.printBtnLoading = true
      setTimeout(() => {
        this.printBtnLoading = false
      }, 4000)
    },
    getCurrentProject(data) {
      this.currentBuilding = data
      if (data.id) {
        this.queryParams.buildingId = data.id
        this.getList()
      } else {
        this.data = []
      }
    },
    /** 查询分部分项列表 */
    getList() {
      if (!this.queryParams.buildingId) return
      this.loading = true
      const params = { ...this.queryParams }
      if (params.chkResult && params.chkResult.length > 0) {
        params.chkResult = params.chkResult.join(',')
      }
      if (this.currentBuilding.buildingType) {
        listBe(params).then(response => {
          this.data = response.rows
          this.total = response.total
          this.loading = false
        })
      } else {
        list(params).then(response => {
          const data = response.data
          this.data = data.records
          this.total = data.total
          this.loading = false
        })
      }
    },
    showPrint(row) {
      this.open = true
      this.printObjLoading = true
      getRecord({ id: row.id }).then(response => {
        this.printObj = response.data
        this.printObjLoading = false
      })
    },
    view(row) {
      let objectId
      if (row.unitType === 1) {
        objectId = row.floor
      } else if (row.unitType === 2) {
        objectId = row.roomId
      } else {
        objectId = row.buildingId
      }
      this.$router.push({ path: '/statement/CheckList', query: {
        buildingId: row.buildingId,
        checktableId: row.checkTableId,
        objectId: objectId,
        print: 1
      }})
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        buildingId: this.currentBuilding.id
      }
      this.getList()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
  .print-wrap {
    height: 80vh;
    overflow: auto;
    position:relative;
    .print-btn {
      position: absolute;
      right: 20px;
    }
  }
  .container {
    height: calc(100vh - 100px);
    overflow-y: hidden;
  }
</style>
<style lang="scss">
/*  .show-print {
    .el-dialog__body {
      padding-top: 0;
    }
  }*/
</style>
